<template>
  <Layout>
    <PageHeader :title="title"></PageHeader>
    <widget></widget>
    <div class="row">
      <div class="col-md-12">
        <div class="card">
          <div class="card-body">
            <b-tabs justified nav-class="newul nav-tabs-custom" content-class="p-3 text-muted">
              <b-tab active>
                <template v-slot:title>
                  <span class="d-inline-block d-sm-none">
                    <i class="fas fa-home"></i>
                  </span>
                  <span class="d-none d-sm-inline-block">日志列表</span>
                </template>
                <div class="row">
                  <div class="col-md-3">
                    <div class="form-group row">
                      <label class="col-md-4 padding-right col-form-label col-offset-1"
                        >应用类型</label
                      >
                      <div class="col-md-8">
                        <select class="form-control">
                          <option>采集日志</option>
                          <option>标签日志</option>
                          <option>处理日志</option>
                          <option>存储日志</option>
                          <option>接口日志</option>
                        </select>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3">
                    <div class="form-group row">
                      <label class="col-md-4 padding-right col-form-label col-offset-1"
                        >服务器名</label
                      >
                      <div class="col-md-8">
                        <select class="form-control">
                          <option>MySQL-192.168.71.32</option>
                          <option>Kafka-10.0.71.52</option>
                          <option>JEE服务器-192.168.71.53</option>
                          <option>ElasticSearch-10.0.71.64</option>
                          <option>MongoDB-192.168.71.72</option>
                        </select>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3">
                    <div class="form-group row">
                      <label class="col-md-4 padding-right col-form-label"
                        >日志等级</label
                      >
                      <div class="col-md-8">
                        <select class="form-control">
                          <option>信息</option>
                          <option>警告</option>
                          <option>错误</option>
                        </select>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3">
                    <div class="form-group row">
                      <label class="col-md-4 padding-right col-form-label col-offset-1"
                        >类名路径</label
                      >
                      <div class="col-md-8">
                        <input type="text" class="form-control rounded" />
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-6">
                    <div class="form-group row">
                      <label class="col-md-2 padding-right col-form-label"
                        >日期范围</label
                      >
                      <div class="col-md-10">
                        <el-date-picker
                          v-model="dateRange"
                          type="datetimerange"
                          :picker-options="pickerOptions"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                        >
                        </el-date-picker>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3">
                    <div class="form-group row">
                      <label class="col-md-4 padding-right col-form-label"
                        >应用环境</label
                      >
                      <div class="col-md-8">
                        <select class="form-control">
                          <option>正式</option>
                          <option>测试</option>
                        </select>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3">
                    <div class="form-group row">
                      <label class="col-md-4 padding-right col-form-label col-offset-1"
                        >日志内容</label
                      >
                      <div class="col-md-8">
                        <input type="text" class="form-control rounded" />
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row" style="margin-left: 0px">
                  <b-button
                    variant="primary"
                    style="margin-right: 10px; padding: 0rem 0.75rem; height: 32px"
                  >
                    <i class="ri-search-line align-middle mr-1"></i>搜索
                  </b-button>
                  <b-button variant="light" style="padding: 0rem 0.75rem; height: 32px">
                    重置
                  </b-button>
                </div>
                <transaction></transaction>
              </b-tab>
              <b-tab>
                <template v-slot:title>
                  <span class="d-inline-block d-sm-none">
                    <i class="far fa-user"></i>
                  </span>
                  <span class="d-none d-sm-inline-block">日志分析</span>
                </template>
                <div class="row">
                  <div class="col-md-12">
                    <div class="form-group row">
                      <label class="col-md-1 padding-right col-form-label col-offset-1"
                        >日志内容</label
                      >
                      <div class="col-md-11">
                        <input type="text" class="form-control rounded" />
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-3">
                    <div class="form-group row">
                      <label class="col-md-4 padding-right col-form-label col-offset-1"
                        >应用类型</label
                      >
                      <div class="col-md-8">
                        <select class="form-control">
                          <option>采集日志</option>
                          <option>标签日志</option>
                          <option>处理日志</option>
                          <option>存储日志</option>
                          <option>接口日志</option>
                        </select>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3">
                    <div class="form-group row">
                      <label class="col-md-4 padding-right col-form-label"
                        >应用环境</label
                      >
                      <div class="col-md-8">
                        <select class="form-control">
                          <option>正式</option>
                          <option>测试</option>
                        </select>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="form-group row">
                      <label class="col-md-2 padding-right col-form-label"
                        >日期范围</label
                      >
                      <div class="col-md-10">
                        <el-date-picker
                          v-model="dateRange"
                          type="datetimerange"
                          :picker-options="pickerOptions"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                        >
                        </el-date-picker>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row" style="margin-left: 0px">
                  <b-button
                    variant="primary"
                    style="margin-right: 10px; padding: 0rem 0.75rem; height: 32px"
                  >
                    开始分析
                  </b-button>
                  <b-button variant="light" style="padding: 0rem 0.75rem; height: 32px">
                    重置
                  </b-button>
                </div>
                <div>
                  <h4 class="card-title mb-2 mt-4 font-size-12">7日数据采集与信源状态走势分析</h4>
                  <apexchart
                    class="apex-charts"
                    height="300"
                    type="line"
                    dir="ltr"
                    :series="dashedLineChart.series"
                    :options="dashedLineChart.chartOptions"
                  ></apexchart>
                </div>
                <div class="row mt-4">
                  <div class="col-md-4">
                    <h4 class="card-title mb-2 font-size-12">数据采集错误日志类型</h4>
                    <apexchart
                      class="apex-charts"
                      height="320"
                      type="pie"
                      dir="ltr"
                      :series="pieChart.series"
                      :options="pieChart.chartOptions"
                    ></apexchart>
                  </div>
                  <div class="col-md-8">
                    <h4 class="card-title mb-2 font-size-12">数据采集错误日志站点</h4>
                    <apexchart
                      class="apex-charts"
                      height="320"
                      type="bar"
                      dir="ltr"
                      ref="chart"
                      :series="columnDatalabelChart.series"
                      :options="columnDatalabelChart.chartOptions"
                    ></apexchart>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-4">
                    <h4 class="card-title mb-2 font-size-12">数据采集耗时长的站点排名</h4>
                    <div class="table-responsive">
                      <b-table
                        class="table-centered"
                        :items="consumingTimeData"
                        :fields="consumingTimeFields"
                        responsive="sm"
                        :per-page="perPage"
                        :current-page="1"
                        thead-class="thead-light"
                      >
                      </b-table>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <h4 class="card-title mb-2 font-size-12">数据采集错误量的站点排名</h4>
                    <div class="table-responsive">
                      <b-table
                        class="table-centered"
                        :items="errorNumData"
                        :fields="errorNumFields"
                        responsive="sm"
                        :per-page="perPage"
                        :current-page="1"
                        thead-class="thead-light"
                      >
                      </b-table>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <h4 class="card-title mb-2 font-size-12">数据采集错误率的站点排名</h4>
                    <div class="table-responsive">
                      <b-table
                        class="table-centered"
                        :items="errorRateData"
                        :fields="errorRateFields"
                        responsive="sm"
                        :per-page="perPage"
                        :current-page="1"
                        thead-class="thead-light"
                      >
                      </b-table>
                    </div>
                  </div>
                </div>
              </b-tab>
            </b-tabs>
          </div>
        </div>
      </div>
    </div>
  </Layout>
</template>

<script>
import Layout from "../../layouts/main";
import PageHeader from "@/components/page-header";
import widget from "./widget";
import transaction from "./transaction";
export default {
  components: {
    Layout,
    PageHeader,
    widget,
    transaction,
  },
  data() {
    return {
      title: "日志管理",
      pickerOptions: {
        shortcuts: [
          {
            text: "15分钟内",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 900 * 1000);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "一小时内",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      dateRange: "",
      dashedLineChart: {
        series: [
          {
            name: "CPU",
            data: [45, 52, 38, 24, 33, 26, 21],
          },
          {
            name: "内存",
            data: [36, 42, 60, 42, 13, 18, 29],
          },
          {
            name: "磁盘",
            data: [89, 56, 74, 98, 72, 38, 64],
          },
        ],
        chartOptions: {
          chart: {
            zoom: {
              enabled: false,
            },
            toolbar: {
              show: false,
            },
            animations: {
              enabled: false,
            },
          },
          colors: ["#556ee6", "#f46a6a", "#34c38f"],
          dataLabels: {
            enabled: false,
          },
          stroke: {
            width: [3, 4, 3],
            curve: "straight",
            dashArray: [0, 8, 5],
          },
          title: {
            text: "",
            align: "left",
          },
          markers: {
            size: 0,

            hover: {
              sizeOffset: 6,
            },
          },
          legend: {
            position: "top",
            horizontalAlign: "right",
            floating: true,
          },
          xaxis: {
            categories: [
              "01 Jan",
              "02 Jan",
              "03 Jan",
              "04 Jan",
              "05 Jan",
              "06 Jan",
              "07 Jan",
            ],
          },
          tooltip: {
            y: [
              {
                title: {
                  formatter: function (val) {
                    return val;
                  },
                },
              },
              {
                title: {
                  formatter: function (val) {
                    return val;
                  },
                },
              },
              {
                title: {
                  formatter: function (val) {
                    return val;
                  },
                },
              },
            ],
          },
          grid: {
            borderColor: "#f1f1f1",
          },
        },
      },
      pieChart: {
        series: [44, 55, 41, 17, 15],
        chartOptions: {
          labels: ["资讯", "招标", "工商", "自媒体", "政策"],
          colors: ["#1cbb8c", "#5664d2", "#fcb92c", "#4aa3ff", "#ff3d60"],
          legend: {
            show: true,
            position: 'bottom',
            horizontalAlign: 'center',
            verticalAlign: 'middle',
            floating: false,
            fontSize: '14px',
            offsetX: 0,
            offsetY: -10
          },
          responsive: [{
            breakpoint: 600,
            options: {
              legend: {
                show: false
              },
            }
          }]
        }
      },
      columnDatalabelChart: {
        series: [
          {
            name: '站点',
            data: ['200', '280', '341', '231', '301', '233']
          }
        ],
        chartOptions: {
          chart: {
            toolbar: {
              show: false,
            }
          },
          plotOptions: {
            bar: {
              dataLabels: {
                position: 'top', // top, center, bottom
              },
            }
          },
          dataLabels: {
            enabled: false,
          },
          colors: ['#556ee6'],
          grid: {
            borderColor: '#f1f1f1',
          },
          xaxis: {
            categories: ["资讯", "招标", "工商", "自媒体", "政策", "短视频"],
            crosshairs: {
              fill: {
                type: 'gradient',
                gradient: {
                  colorFrom: '#D8E3F0',
                  colorTo: '#BED1E6',
                  stops: [0, 100],
                  opacityFrom: 0.4,
                  opacityTo: 0.5,
                }
              }
            },
            tooltip: {
              enabled: true,
              offsetY: -35,
            }
          },
          fill: {
            gradient: {
              shade: 'light',
              type: "horizontal",
              shadeIntensity: 0.25,
              gradientToColors: undefined,
              inverseColors: true,
              opacityFrom: 1,
              opacityTo: 1,
              stops: [50, 0, 100, 100]
            },
          },
          yaxis: {
            labels: {
              show: true,
              formatter: function (val) {
                return val;
              }
            }
          },
        }
      },
      perPage: 10,
      consumingTimeData: [
        {
          name: "国家公共资源网",
          type: "招标,政策",
          consumingTime: "2s",
          collectionNum: "24",
        }
      ],
      consumingTimeFields: [
        { key: "name", label: "站点名称" },
        { key: "type",  label: "站点类型" },
        { key: "consumingTime",  label: "采集耗时时长" },
        { key: "collectionNum", label: "采集量" },
      ],
      errorNumData: [
        {
          name: "国家公共资源网",
          type: "招标,政策",
          abnormalNum: "1",
          collectionNum: "24",
        }
      ],
      errorNumFields: [
        { key: "name", label: "站点名称" },
        { key: "type",  label: "站点类型" },
        { key: "abnormalNum",  label: "异常数量" },
        { key: "collectionNum", label: "采集量" },
      ],
      errorRateData: [
        {
          name: "国家公共资源网",
          type: "招标,政策",
          abnormalNum: "2%",
          collectionNum: "24",
        }
      ],
      errorRateFields: [
        { key: "name", label: "站点名称" },
        { key: "type",  label: "站点类型" },
        { key: "abnormalNum",  label: "采集错误率" },
        { key: "collectionNum", label: "采集量" },
      ],
    }
  },
};
</script>

<style scoped lang="scss">
.padding-right {
  padding-right: 0;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}
.card-body ::v-deep .newul{
  display: block;
  li{
    display: inline-block;
    margin: 0 1rem;
    a{
      padding: 0.5rem 0rem;
    }
  }
}
.row {
  .el-input__inner {
    width: 100%;
    height: 1.7rem;
    padding: 0rem 0.75rem;
    line-height: 1.7rem;
    ::v-deep .el-input__icon,
    ::v-deep .el-range-separator {
      line-height: 1.7rem;
    }
  }
  input,
  select {
    height: 1.7rem;
    padding: 0rem 0.75rem;
  }
}
</style>
